<template>
  <el-container class="renderClassic">
    <el-aside :class="collapse ? '' : 'collapse'">
      <Logo />
      <Menu />
    </el-aside>
    <el-container>
      <el-header>
        <div class="top flex relative">
          <div class="left flex items-center">
            <Collapse />
            <Breadcrumb />
          </div>
          <div class="right flex items-center">
            <RightControls />
          </div>
        </div>
        <TagsView />
      </el-header>
      <el-main>
        <keep-alive>
          <Transition :name="direction">
            <router-view />
          </Transition>
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Logo from "./Logo.vue";
import TagsView from "./TagsView/Index.vue";
import Breadcrumb from "./Breadcrumb.vue";
import RightControls from "./RightControls";
import Collapse from "./Collapse";
import Menu from "./Menu/Index";
import { useFoldMenuStore } from "@/store/foldMenu";
import { useSwitchTransitionStore } from "@/store/switchTransition";
import { storeToRefs } from "pinia";
const foldMenuStore = useFoldMenuStore();
const { collapse } = storeToRefs(foldMenuStore);
const switchTransitionStore = useSwitchTransitionStore();
const { direction } = storeToRefs(switchTransitionStore);
defineOptions({
  name: "RenderClassic",
});
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  .el-aside {
    width: 64px;
    background: rgba(36, 36, 36, 1);
    :deep(.el-menu) {
      height: calc(100% - 40px) !important;
    }
    &::-webkit-scrollbar {
      width: 0;
    }
    &.collapse {
      width: 260px;
    }
  }
  .el-header {
    padding: 0;
    height: 96px;
    .top {
      height: 56px;
      justify-content: space-between;
      padding: 0 25px;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #dcdfe6;
        z-index: 3;
      }
    }
  }
  .el-main {
    background: rgba(245, 245, 245, 1);
    .main-root {
      width: 100%;
      height: 100%;
    }
  }
  --transitionSeconds: 0.5s;
  .left-leave-active {
    transition: var(--transitionSeconds);
    opacity: 0;
    transform: translateX(-50%);
    position: absolute;
    width: 100%;
    left: 0;
  }
  .left-enter {
    transform: translateX(50%);
  }
  .left-enter-active {
    transition: var(--transitionSeconds);
  }
  .right-leave-active {
    transition: var(--transitionSeconds);
    opacity: 0;
    transform: translateX(50%);
    position: absolute;
    width: 100%;
    left: 0;
  }
  .right-enter {
    transform: translateX(-50%);
  }
  .right-enter-active {
    transition: var(--transitionSeconds);
  }
}
</style>
